<template>
    <div>
        <button @click="IsShow = !IsShow">显示/隐藏</button>
        <!-- appear 进出场的时候默认加载一次   name设置的话 样式的名称v也要进行修改调整-->
        <transition name="hoo" appear>
            <h2 v-show="IsShow">你好啊</h2>

            <!-- 自己写动画按照下面这样写 可以实现，Vue的话它给他提供了一个标签transition -->
            <!-- <h2 class="go" v-show="IsShow">你好啊</h2> -->
        </transition>
        
    </div>
</template>
<script>
export default {
    data() {
        return {
            IsShow:true
        }
    },
}
</script>
<style scoped>
    h2{
        background-color: yellow;
    }

    /* 固定格式 进场动画
    .v-enter-active{
        animation: fly 1s linear;
    }

     固定格式 离场动画 
    .v-leave-active{
        animation: fly 1s reverse;
    } */


    .hoo-enter-active{
        animation: fly 1s linear;
    }


    .hoo-leave-active{
        animation: fly 1s reverse;
    } 

    @keyframes fly {
        from{
            transform: translateX(-100%);
        }
        to{
            transform: translateX(0px);
        }
    }
</style>